<template>
  <div>
    <el-table
      :data="pagination.list"
      border
      style="width: 100%"
    >
      <el-table-column
        label="JobId"
        prop="JobId"
      >
        <template slot-scope="scope">
          <div class="flex-j-a t-tag-blue">
            <span
              role="img"
              aria-label="fire"
              class="anticon anticon-fire"
            ><svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="fire"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                d="M834.1 469.2A347.49 347.49 0 00751.2 354l-29.1-26.7a8.09 8.09 0 00-13 3.3l-13 37.3c-8.1 23.4-23 47.3-44.1 70.8-1.4 1.5-3 1.9-4.1 2-1.1.1-2.8-.1-4.3-1.5-1.4-1.2-2.1-3-2-4.8 3.7-60.2-14.3-128.1-53.7-202C555.3 171 510 123.1 453.4 89.7l-41.3-24.3c-5.4-3.2-12.3 1-12 7.3l2.2 48c1.5 32.8-2.3 61.8-11.3 85.9-11 29.5-26.8 56.9-47 81.5a295.64 295.64 0 01-47.5 46.1 352.6 352.6 0 00-100.3 121.5A347.75 347.75 0 00160 610c0 47.2 9.3 92.9 27.7 136a349.4 349.4 0 0075.5 110.9c32.4 32 70 57.2 111.9 74.7C418.5 949.8 464.5 959 512 959s93.5-9.2 136.9-27.3A348.6 348.6 0 00760.8 857c32.4-32 57.8-69.4 75.5-110.9a344.2 344.2 0 0027.7-136c0-48.8-10-96.2-29.9-140.9zM713 808.5c-53.7 53.2-125 82.4-201 82.4s-147.3-29.2-201-82.4c-53.5-53.1-83-123.5-83-198.4 0-43.5 9.8-85.2 29.1-124 18.8-37.9 46.8-71.8 80.8-97.9a349.6 349.6 0 0058.6-56.8c25-30.5 44.6-64.5 58.2-101a240 240 0 0012.1-46.5c24.1 22.2 44.3 49 61.2 80.4 33.4 62.6 48.8 118.3 45.8 165.7a74.01 74.01 0 0024.4 59.8 73.36 73.36 0 0053.4 18.8c19.7-1 37.8-9.7 51-24.4 13.3-14.9 24.8-30.1 34.4-45.6 14 17.9 25.7 37.4 35 58.4 15.9 35.8 24 73.9 24 113.1 0 74.9-29.5 145.4-83 198.4z"
              /></svg></span>
            {{ scope.row.jobId }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="作业名称"
        prop="jobName"
      >
        <template slot-scope="scope">
          <div class="flex-j-a t-tag-green">
            <span
              role="img"
              aria-label="cluster"
              class="anticon anticon-cluster"
            ><svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="cluster"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                d="M888 680h-54V540H546v-92h238c8.8 0 16-7.2 16-16V168c0-8.8-7.2-16-16-16H240c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h238v92H190v140h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8h-54v-72h220v72h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8h-54v-72h220v72h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8zM256 805.3c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7zm288 0c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7zM288 384V216h448v168H288zm544 421.3c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7zM360 300a40 40 0 1080 0 40 40 0 10-80 0z"
              /></svg></span>
            {{ scope.row.jobName }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="运行集群"
        prop="type"
      >
        <template slot-scope="scope">
          <div class="flex-j-a t-tag-blue">
            <span
              role="img"
              aria-label="rocket"
              class="anticon anticon-rocket"
            ><svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="rocket"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                d="M864 736c0-111.6-65.4-208-160-252.9V317.3c0-15.1-5.3-29.7-15.1-41.2L536.5 95.4C530.1 87.8 521 84 512 84s-18.1 3.8-24.5 11.4L335.1 276.1a63.97 63.97 0 00-15.1 41.2v165.8C225.4 528 160 624.4 160 736h156.5c-2.3 7.2-3.5 15-3.5 23.8 0 22.1 7.6 43.7 21.4 60.8a97.2 97.2 0 0043.1 30.6c23.1 54 75.6 88.8 134.5 88.8 29.1 0 57.3-8.6 81.4-24.8 23.6-15.8 41.9-37.9 53-64a97 97 0 0043.1-30.5 97.52 97.52 0 0021.4-60.8c0-8.4-1.1-16.4-3.1-23.8H864zM762.3 621.4c9.4 14.6 17 30.3 22.5 46.6H700V558.7a211.6 211.6 0 0162.3 62.7zM388 483.1V318.8l124-147 124 147V668H388V483.1zM239.2 668c5.5-16.3 13.1-32 22.5-46.6 16.3-25.2 37.5-46.5 62.3-62.7V668h-84.8zm388.9 116.2c-5.2 3-11.2 4.2-17.1 3.4l-19.5-2.4-2.8 19.4c-5.4 37.9-38.4 66.5-76.7 66.5-38.3 0-71.3-28.6-76.7-66.5l-2.8-19.5-19.5 2.5a27.7 27.7 0 01-17.1-3.5c-8.7-5-14.1-14.3-14.1-24.4 0-10.6 5.9-19.4 14.6-23.8h231.3c8.8 4.5 14.6 13.3 14.6 23.8-.1 10.2-5.5 19.6-14.2 24.5zM464 400a48 48 0 1096 0 48 48 0 10-96 0z"
              /></svg></span>
            {{ scope.row.type }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="状态"
        prop="status"
      >
        <template slot-scope="scope">
          <p :style="'color:' + scope.row.status == '0' ? 'blue' : scope.row.status == '3' ? 'red' : 'green'">
            {{
              scope.row.status == '0'
                ? '初始化'
                : scope.row.status == '1'
                  ? '运行中'
                  : scope.row.status == '2'
                    ? '成功'
                    : scope.row.status == '3'
                      ? '失败'
                      : '停止'
            }}
          </p>
        </template>
      </el-table-column>

      <el-table-column
        label="共享会话"
        prop="jobManagerAddress"
      >
        <template slot-scope="scope">
          <a
            class="ant-typography"
            direction="ltr"
            :href="'http://' + scope.row.jobManagerAddress"
            target="_blank"
            rel="noopener noreferrer"
          >[{{ scope.row.jobManagerAddress }}]</a>
        </template>
      </el-table-column>

      <el-table-column
        label="开始时间"
        prop="startTime"
      >
        <template slot-scope="scope">
          {{ scope.row.startTime == null ? '暂无' : moment(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>

      <el-table-column
        label="结束时间"
        prop="endTime"
      >
        <template slot-scope="scope">
          {{ scope.row.endTime == null ? '暂无' : moment(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="300"
      >
        <template slot-scope="scope">
          <el-row type="flex" align="middle" justify="space-around">
            <el-button
              size="mini"
              type="primary"
              @click="onItemClick(scope.row, '执行配置')"
            >
              执行配置
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="onItemClick(scope.row, 'FlinkSql语句')"
            >
              FlinkSql语句
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="onItemClick(scope.row, '异常信息')"
            >
              异常信息
            </el-button>
          <!-- <el-button
            size="mini"
            type="danger"
            @click="onItemClick(scope.row, 'delete')"
          >
            删除
          </el-button> -->
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :pagination="pagination"
      @page-size-changed="pageSizeChangeHandler"
      @page-changed="pageChangeHandler"
    />

    <el-dialog
      :title="type"
      :visible="medium"
      width="50%"
      :before-close="handleClose"
    >
      <div v-if="historyInfo != null" class="w10">
        JobId:
        <div class="flex-j-a t-tag-blue">
          <span
            role="img"
            aria-label="fire"
            class="anticon anticon-fire"
          ><svg
            viewBox="64 64 896 896"
            focusable="false"
            data-icon="fire"
            width="1em"
            height="1em"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              d="M834.1 469.2A347.49 347.49 0 00751.2 354l-29.1-26.7a8.09 8.09 0 00-13 3.3l-13 37.3c-8.1 23.4-23 47.3-44.1 70.8-1.4 1.5-3 1.9-4.1 2-1.1.1-2.8-.1-4.3-1.5-1.4-1.2-2.1-3-2-4.8 3.7-60.2-14.3-128.1-53.7-202C555.3 171 510 123.1 453.4 89.7l-41.3-24.3c-5.4-3.2-12.3 1-12 7.3l2.2 48c1.5 32.8-2.3 61.8-11.3 85.9-11 29.5-26.8 56.9-47 81.5a295.64 295.64 0 01-47.5 46.1 352.6 352.6 0 00-100.3 121.5A347.75 347.75 0 00160 610c0 47.2 9.3 92.9 27.7 136a349.4 349.4 0 0075.5 110.9c32.4 32 70 57.2 111.9 74.7C418.5 949.8 464.5 959 512 959s93.5-9.2 136.9-27.3A348.6 348.6 0 00760.8 857c32.4-32 57.8-69.4 75.5-110.9a344.2 344.2 0 0027.7-136c0-48.8-10-96.2-29.9-140.9zM713 808.5c-53.7 53.2-125 82.4-201 82.4s-147.3-29.2-201-82.4c-53.5-53.1-83-123.5-83-198.4 0-43.5 9.8-85.2 29.1-124 18.8-37.9 46.8-71.8 80.8-97.9a349.6 349.6 0 0058.6-56.8c25-30.5 44.6-64.5 58.2-101a240 240 0 0012.1-46.5c24.1 22.2 44.3 49 61.2 80.4 33.4 62.6 48.8 118.3 45.8 165.7a74.01 74.01 0 0024.4 59.8 73.36 73.36 0 0053.4 18.8c19.7-1 37.8-9.7 51-24.4 13.3-14.9 24.8-30.1 34.4-45.6 14 17.9 25.7 37.4 35 58.4 15.9 35.8 24 73.9 24 113.1 0 74.9-29.5 145.4-83 198.4z"
            /></svg></span>
          {{ historyInfo.jobId }}
        </div>
      </div>
      <div v-if="type == '执行配置'" class="configBox">
        <p class="w5">
          共享会话:禁用
        </p>
        <p class="w5">
          进程ID:{{ historyInfo.id }}
        </p>
        <p class="w5">
          执行方式:远程
        </p>
        <p class="w5">
          任务类型:{{ historyInfo.type }}
        </p>
        <p class="w5">
          集群ID:{{ historyInfo.clusterConfigurationId || '' }}
        </p>
        <p class="w5">
          预览结果:启用
        </p>
        <p class="w5">
          打印流:禁用
        </p>
        <p class="w5">
          最大行数:100
        </p>
        <p class="w5">
          自动停止:禁用
        </p>
        <p class="w5">
          JobManagerAddress:{{ historyInfo.jobManagerAddress || '' }}
        </p>
        <p class="w5">
          作业ID:{{ historyInfo.taskId }}
        </p>
        <p class="w5">
          作业名:{{ historyInfo.jobName }}
        </p>
        <p class="w5">
          片段机制:禁用
        </p>
        <p class="w5">
          语句集:禁用
        </p>
        <p class="w5">
          CheckPoint:0
        </p>
        <p class="w5">
          开始时间:{{ historyInfo.startTime == null ? ' ' : historyInfo.startTime.replace('T', ' ') }}
        </p>
        <p class="w5">
          结束时间:{{ historyInfo.endTime == null ? ' ' : historyInfo.endTime.replace('T', ' ') }}
        </p>
        <p class="w5">
          savePoint 机制:NONE
        </p>
        <p class="w5">
          SavePointPath:
        </p>
      </div>
      <div v-if="type == 'FlinkSql语句'" class="configBox">
        <pre
          style="
                height: 300px;
                background: #eee;
                display: block;
                overflow: scroll;
                width: 100%;
                padding: 0.4em 0.6em;
                white-space: pre-wrap;
                word-wrap: break-word;
                background: hsla(0, 0%, 58.8%, 0.1);
                border: 1px solid hsla(0, 0%, 39.2%, 0.2);
                border-radius: 3px;
              "
          class="pre"
        >
              {{ historyInfo.statement }}
            </pre>
      </div>
      <div v-if="type == '异常信息' && errorInfo" class="errorInfo">
        {{ errorInfo }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="medium = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'
import { queryHistoryInfo, getJobExceptionLog } from '../api/workDevelopment'
import queryPageForm from './queryPageForm.js'
import { deepMerge } from '../utils/index'

export default {
  name: 'History',
  mixins: [queryPageForm],
  // props: {
  //   taskParams: { type: Object, default: () => ({}) }
  // },
  data() {
    const queryCriteria = this.initQueryCriteria()
    return {
      queryCriteria: queryCriteria,
      historyInfo: null,
      medium: false,
      type: '',
      errorInfo: '',
      data: [],
      loading: false
    }
  },
  methods: {
    moment,
    // 初始化搜索表单
    initQueryCriteria(form = {}) {
      return deepMerge(form, {
        jobName: '',
        sorts: [{
          fieldName: 'jobName',
          direction: 'desc'
        }]
      })
    },
    // 搜索
    executeQueryPage() {
      queryHistoryInfo(this.createQueryParams()).then((data) => {
        this.queryResultHandler(data)
      })
    },
    async onItemClick(param, type) {
      if (type === 'delete') {
        return
      }
      this.historyInfo = param
      this.medium = true
      this.type = type
      if (type === '异常信息') {
        if (param.jobId === 'unknown') {
          this.errorInfo = '没有获取到任何JID，请自行排查原因'
          return
        }
        this.errorInfo = param.error || ''
        // await getJobExceptionLog({ jobId: param.jobId }).finally(() => {
        getJobExceptionLog({ jobId: '1d22917c60060d087f89b4a74515fef4' }).finally(() => {
          this.loading = false
        })
      }
    },
    handleClose() {
      this.medium = false
    }
  }
}
</script>

<style scoped lang="less">
:deep(thead tr)  {
  background-color: #f5f5f5;
  th {
    text-align: center;
  }
}
.w10 {
  width: 100%;
  display: flex;
}
.configBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  .w5 {
    width: 50%;
    margin-top: 10px;
  }
}
.q-pb-none {
  margin-bottom: 20px;
}
.flex-j-a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  border: 0.5px solid #096dd9;
  border-radius: 4px;
  padding: 0 4px;
}
.t-tag-blue {
  color: #096dd9;
  background: #e6f7ff;
  border-color: #91d5ff;
}
.t-tag-green {
  color: #389e0d;
  background: #f6ffed;
  border-color: #b7eb8f;
}
.errorInfo {
  margin-top: 30px;
  max-height: 300px;
  overflow: scroll;
}
.text-right {
  p {
    margin: 0;
  }
}
</style>
